<!-- ImageGroup是一个用于动态展示多张图片的组件，根据图片数量不同，它有不同的展示效果，最多支持四张图片 -->
<template>
  <div class="image-group">
    <a-image 
            :src="image.previewUrl"
            :preview='{
              src: image.url
            }'
            @click.stop=""
            :key="i"
            v-for="(image,i) in images"></a-image>
  </div>
</template>

<script setup lang="ts">
// images格式： [ {url: 'xxx', previewUrl: 'xxx'} ]
defineProps({
  images: {
    type: Array
  }
});
</script>

<style>

.image-group {
  user-select: none;
  display: flex;
  flex-direction: row;
  border-radius: 20px;
  overflow: hidden;
  width: fit-content;
}
.ant-image-img {
  object-fit: cover;
  height: 100%;
  min-height: 200px;
}
</style>